<template>
  <ContentField>
    <h1>排行榜</h1>
    <a-table
      :columns="columns"
      :data-source="records"
      :pagination="pagination"
      @change="handleTableChange"
    >
      <template #bodyCell="{ column, text }">
        <template v-if="column.title === '用户名'">
          <a-avatar :size="64" :src="text.photo" /> &nbsp; {{ text.username }}
        </template>
        <template v-if="column.title === '粉丝数'">
          {{ text }}
        </template>
        <template v-if="column.title === 'Ranting'">
          {{ text }}
        </template>
        <template v-if="column.title === '操作'">
          <a-button type="primary" @click="open_space(text.id)">
            拜访空间
          </a-button>
        </template>
      </template>
    </a-table>
  </ContentField>
</template>

<script>
import ContentField from "@/components/ContentField";
import rankingApi from "@/apis/rankingApi";
import { useStore } from "vuex";
import { ref } from "@vue/reactivity";
import { computed, onMounted } from "@vue/runtime-core";
import router from "@/router";
const columns = [
  {
    title: "用户名",
    width: "25%",
  },
  {
    title: "粉丝数",
    dataIndex: "followerCount",
    width: "25%",
  },
  {
    title: "Ranting",
    dataIndex: "ranting",
    width: "25%",
  },
  {
    title: "操作",
    width: "25%",
  },
];
export default {
  name: "RankListView",
  components: {
    ContentField,
  },
  setup() {
    const store = useStore();
    const access = store.state.user.info.access;

    const records = ref([]);
    const current = ref(1);
    const total = ref();
    const limit = ref(5);

    onMounted(() => {
      getRanks(1, 5, access);
    });

    const getRanks = (page, limit, access) => {
      rankingApi.getRank(page, limit, access).then((resp) => {
        records.value = resp.data.records;
        total.value = resp.data.total;
        current.value = resp.data.current;
      });
    };

    const pagination = computed(() => ({
      total: total.value,
      current: current.value,
      pageSize: limit.value,
    }));

    const handleTableChange = (pag) => {
      limit.value = pag.pageSize;
      current.value = pag.current;
      getRanks(pag.current, pag.pageSize, access);
    };

    const open_space = (id) => {
      router.push({
        name: "userspace",
        params: {
          userId: id,
        },
      });
    };

    return {
      records,
      current,
      total,
      limit,
      columns,

      pagination,

      handleTableChange,
      open_space,
    };
  },
};
</script>

<style scoped>
</style>